<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Simple - 简！ </title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <meta name="keywords" content="layui,ui,ui框架,前端框架,JS组件,Simple">
    <meta name="description" content="Simple 是一个基于layui框架，一个轻量，简约，包含丰富模块化前端框架，帮您快速构建网站。">
    <link rel="stylesheet" href="./css/s.css">
    <link rel="stylesheet" href="./css/extend.css">
    <script src="./layui.js"></script>
</head>
<body>


<div class="admin-header">
    <div class="header-logo ">
        <img src="./img/logo/logoadmin.png" alt="">
    </div>

    <ul class="header-left">
        <li><a href=""><i class="layui-icon layui-icon-website" ></i></a></li>
        <li><a href=""><i class="layui-icon layui-icon-flag"></i></a></li>
        <li><a href=""><i class="layui-icon layui-icon-search"></i></a></li>
    </ul>


    <ul class="layui-nav header-right">
        <li class="layui-nav-item  header-right-item">
            <a href="" ><img src="./img/faces/tx.png" class="layui-nav-img">芥末萌萌哒</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">退了</a></dd>
            </dl>
        </li>

        <li class="layui-nav-item  header-right-item">
            <a href="">我的消息<span class="layui-badge-dot"></span></a>
        </li>

        <li class="layui-nav-item header-right-item">
            <a href=""><i class="layui-icon layui-icon-close"></i></a>
        </li>

    </ul>
    <div class="layui-clear"></div>
</div>
<div class="admin-menu fold">
    <p class="admin-menu-f" id="admin-menu-f"><i class="layui-icon layui-icon-more"></i></p>

    <ul>
        <li class="menu-item ">
            <a href="#"><i class="layui-icon layui-icon-console " ></i><span class="wb-nav-title"> 仪表盘</span> </a>
            <span class="menu-item-tip">仪表盘</span>
        </li>

        <li class="menu-item ">
            <a href="#"><i class="layui-icon layui-icon-component" ></i><span class="wb-nav-title"> 组件库</span> </a>
            <span class="menu-item-tip">组件库</span>
        </li>

        <li class="menu-item ">
            <a href="#"><i class="layui-icon layui-icon-table" ></i> <span class="wb-nav-title"> 表格库</span> </a>
            <span class="menu-item-tip">表格库</span>
        </li>


        <li class="menu-item active">
            <a href="#"><i class="layui-icon layui-icon-radio" ></i> <span class="wb-nav-title"> 表单库</span> </a>
            <span class="menu-item-tip">表单库</span>
        </li>


        <li class="menu-item">
            <a href="#"><i class="layui-icon layui-icon-chart" ></i><span class="wb-nav-title"> 图表库</span>  </a>
            <span class="menu-item-tip">图表库</span>
        </li>


        <li class="menu-item">
            <a href="#"><i class="layui-icon layui-icon-template-1 " ></i><span class="wb-nav-title"> 页面库</span> </a>
            <span class="menu-item-tip">页面库</span>
        </li>

        <li class="menu-item">
            <a href="#"><i class="layui-icon layui-icon-diamond text-yellow" ></i><span class="wb-nav-title"> 模板库</span> </a>
            <span class="menu-item-tip">模板库</span>
        </li>

        <li class="menu-item item-bottom " >
            <a href="#"><i class="layui-icon  layui-icon-set" ></i><span class="wb-nav-title"> 系统设置</span></a>
            <span class="menu-item-tip">系统设置</span>
        </li>


    </ul>
</div>




<div class="admin-submenu">
    <div style="width: 100%; height: 100%">

        <div class="submenu-scene">
            系统设置
        </div>

        <div class="submenu-item">配置</div>
        <ul>
            <li ><a href="#"> Index 首页</a></li>
            <li class="active"><a href="#">Setting 设置</a></a></li>

            <li><a href="#">Ue 编辑器</a></a></li>

            <li><a href="#">Shop 商家<span class="layui-badge-dot"></span></a></a></li>


            <li ><a href="#">List 列表<span class="layui-badge-dot"></span></a></a></li>


        </ul>

        <div id="admin-submenu-c">
            <i class="layui-icon layui-icon-prev"></i>
        </div>

    </div>

</div>

<div class="admin-content">

    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="adminpageheader">
                <h2 class="adminpagetitle">当前位置：<a href="">站点设置</a></h2>
            </div>

            <div class="admin-block">

                <div class="block">

                    <div class="block-action">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe608;</i> 添加</button>
                        </div>
                    </div>

                    <div class="block-tab">
                        <div class="layui-tab layui-tab-brief" lay-filter="settingtab">
                            <ul class="layui-tab-title">
                                <li class="layui-this">网站设置</li>
                                <li>秘钥配置</li>
                            </ul>

                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="block-body">
                                        <div class="block-table">
                                            <div class="layui-row">
                                                <div class="layui-col-md2">
                                                    <div class="layui-form-group">基础设置</div>
                                                </div>
                                                <div class="layui-col-md10">
                                                    <form class="layui-form" action="" lay-filter="setting">

                                                        <div class="layui-row  layui-form-item">
                                                            <div class="layui-col-md12">
                                                                <label class="layui-form-label"><span
                                                                        class="text-red">*</span>站点名称：</label>
                                                                <div class="layui-input-block">
                                                                    <input type="text" name="sitename"
                                                                           lay-verify="required" placeholder=""
                                                                           autocomplete="off" class="layui-input"
                                                                           value="Simple 简！">
                                                                    <div class="input-tip">全站显示Title位置</div>
                                                                </div>
                                                            </div>

                                                        </div>


                                                        <div class="layui-row  layui-form-item">
                                                            <div class="layui-col-md12">
                                                                <label class="layui-form-label"><span
                                                                        class="text-red">*</span>SEO关键字：</label>
                                                                <div class="layui-input-block">
                                                                    <input type="text" name="keyword"
                                                                           lay-verify="required" placeholder="请输入关键字"
                                                                           autocomplete="off" class="layui-input">
                                                                    <div class="input-tip">请使用英文逗号分开</div>
                                                                </div>
                                                            </div>

                                                        </div>


                                                        <div class="layui-row  layui-form-item">
                                                            <div class="layui-col-md12">

                                                                <label class="layui-form-label"><span
                                                                        class="text-red">*</span>站点描述：</label>
                                                                <div class="layui-input-block">
                                                                    <textarea name="description" placeholder=""
                                                                              class="layui-textarea"></textarea>
                                                                </div>

                                                            </div>


                                                        </div>


                                                        <div class="layui-row  layui-form-item">
                                                            <div class="layui-col-md12">
                                                                <label class="layui-form-label">站点状态：</label>
                                                                <div class="layui-input-block">
                                                                    <input type="checkbox" name="status"
                                                                           lay-skin="switch" lay-text="已运行|已关闭"
                                                                           value="1" checked>


                                                                    <div class="input-tip">启用起来就很完美</div>

                                                                </div>
                                                            </div>

                                                        </div>


                                                        <div class="layui-form-item">
                                                            <div class="layui-input-block">
                                                                <button class="layui-btn" lay-submit
                                                                        lay-filter="forsetting">立即提交
                                                                </button>
                                                                <button type="reset"
                                                                        class="layui-btn layui-btn-primary">重置
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>


                                            </div>

                                        </div>

                                    </div>

                                </div>
                                <div class="layui-tab-item">


                                    <div class="block-body">


                                        <p>毛都没有...</p>

                                    </div>

                                </div>
                            </div>

                        </div>

                    </div>


                </div>

            </div>

            <div class="admin-footer">
                <img src="./img/logo/footlogo.png" alt="">
            </div>

        </div>

    </div>
</div>


<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(forsetting)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>

<div class="admin-panel">
    <div class="layui-collapse">

        <div class="layui-colla-item">
            <h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-face-smile-fine"></i> <span class="sfqt">后台播报</span>   </h2>
            <div class="layui-colla-content layui-show item-color">
                <ul>
                    <li>更新了后台整体布局代码，剔除行内样式 </li>
                    <li>冲突样式放低优先级，不影响样式覆盖 </li>
                    <li>修复菜单搜索文字弹跳的Bug </li>
                </ul>
            </div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-speaker" ></i>  <span class="sfqt">内部公告</span></h2>
            <div class="layui-colla-content item-color">暂无</div>
        </div>

        <div class="layui-colla-item">
            <h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-log" ></i>  <span class="sfqt">工作日志</span></h2>
            <div class="layui-colla-content item-color">暂无</div>
        </div>

        <div class="layui-colla-item">
            <h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-survey" ></i>  <span class="sfqt">我的工单</span></h2>
            <div class="layui-colla-content item-color">暂无</div>
        </div>




        <div class="layui-colla-item ">
            <h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-notice"></i>  <span class="sfqt">系统更新</span></h2>
            <div class="layui-colla-content item-color">
                <ul>
                    <li>暂无</span> </li>
                </ul>
            </div>
        </div>

        <div class="layui-colla-item">
            <h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-about" ></i>  <span class="sfqt">联系我们</span></h2>
            <div class="layui-colla-content item-color">暂无</div>
        </div>
    </div>


    <div class="admin-panel-a">
        <div id="admin-panel-c"><i class="layui-icon layui-icon-spread-left"></i> 收起面板</div>
    </div>



</div>



<script>
    layui.use(['element','form', 'layer', 'jquery'], function () {

        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;



        /* 左侧收缩hover效果 */
        $('.menu-item').mouseover(function () {

            if($('.admin-menu.fold').length>0){
                $(this).find('.menu-item-tip').show();
            }
        });
        $('.menu-item').mouseout(function () {

            if($('.admin-menu.fold').length>0){
                $(this).find('.menu-item-tip').hide();
            }

        });

        /* 左菜单控制 */
        $('#admin-menu-f').click(function () {
            if ($('.admin-menu').hasClass('open')) {
                $('.header-logo').toggleClass('open');
                $('.admin-menu').toggleClass('open');
                $('.admin-menu').addClass('fold');
                if ($('.admin-submenu').hasClass('out')) {
                    $('.admin-content').css({"margin-left": "60px"});
                } else {
                    $('.admin-content').css({"margin-left": "170px"});
                }
            } else {
                $('.header-logo').toggleClass('open');
                $('.admin-menu').toggleClass('open');
                $('.admin-menu').removeClass('fold');
                if ($('.admin-submenu').hasClass('out')) {
                    $('.admin-content').css({"margin-left": "130px"});
                } else {
                    $('.admin-content').css({"margin-left": "240px"});
                }
            }
        });

        /* 子菜单控制 */
        $('#admin-submenu-c').click(function () {
            if (!$(this).hasClass('out')) {
                $(this).toggleClass('out');
                $('.admin-submenu').addClass('out');
                if ($('.admin-menu').hasClass('fold')) {
                    $('.admin-content').css({"margin-left": "60px"});
                } else {
                    $('.admin-content').css({"margin-left": "130px"});
                }
            } else {
                $('.admin-submenu').removeClass('out');
                $(this).toggleClass('out');
                if ($('.admin-menu').hasClass('fold')) {
                    $('.admin-content').css({"margin-left": "170px"});
                } else {
                    $('.admin-content').css({"margin-left": "240px"});
                }
            }
        });

        /* 侧边栏控制面板 */
        $('#admin-panel-c').click(function () {
            if (!$(this).hasClass('out')) {
                $(this).html('<i class="layui-icon layui-icon-tips"></i> 消息看板');
                $('.admin-panel').addClass('out');
                $(this).toggleClass('out');
                $('.admin-content').css({"margin-right": "0"});
            } else {
                $(this).html('<i class="layui-icon layui-icon-spread-left"></i> 收起面板');
                $('.admin-panel').removeClass('out');
                $(this).toggleClass('out');
                $('.admin-content').css({"margin-right": "170px"});
            }
        });





    });
</script>
</body>
</html>